<script setup lang="ts">
import { RouterLink, RouterView, useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import {
  Monitor,
  Fold,
  Expand,
  User,
  ArrowDown,
  Setting,
  HomeFilled,
  Refresh,
  DataLine,
  Platform,
  Aim,
  Document,
  DataAnalysis
} from '@element-plus/icons-vue'

const route = useRoute()
const isCollapse = ref(false)
const isDarkMode = ref(false)

// 切换侧边栏折叠状态
const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value
}

// 切换暗黑模式
const toggleDarkMode = () => {
  isDarkMode.value = !isDarkMode.value
  document.documentElement.classList.toggle('dark-mode', isDarkMode.value)
}

// 获取当前时间
const currentTime = ref(new Date())
const updateTime = () => {
  currentTime.value = new Date()
}

// 每秒更新时间
let timeInterval: any = null
onMounted(() => {
  updateTime()
  timeInterval = setInterval(updateTime, 1000)
})

// 组件卸载时清除定时器
const onBeforeUnmount = () => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
}

// 格式化时间显示
const formattedTime = () => {
  const now = currentTime.value
  const hours = now.getHours().toString().padStart(2, '0')
  const minutes = now.getMinutes().toString().padStart(2, '0')
  const seconds = now.getSeconds().toString().padStart(2, '0')
  return `${hours}:${minutes}:${seconds}`
}

// 格式化日期显示
const formattedDate = () => {
  const now = currentTime.value
  const year = now.getFullYear()
  const month = (now.getMonth() + 1).toString().padStart(2, '0')
  const day = now.getDate().toString().padStart(2, '0')
  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  const weekday = weekdays[now.getDay()]
  return `${year}-${month}-${day} ${weekday}`
}
</script>

<template>
  <el-container class="app-container">
    <!-- 侧边菜单 -->
    <el-aside :width="isCollapse ? '64px' : '240px'" class="aside">
      <div class="logo-container" :class="{ 'collapsed': isCollapse }">
        <img src="@/assets/logo.svg" alt="舆情监控" class="logo" />
        <h1 class="title" v-show="!isCollapse">舆情监控系统</h1>
      </div>
      
      <div class="menu-wrapper">
        <el-menu
          router
          default-active="/"
          class="el-menu-vertical"
          :collapse="isCollapse"
          :collapse-transition="false"
          background-color="var(--menu-bg)"
          text-color="var(--menu-text)"
          active-text-color="var(--primary-color)"
        >
          <el-menu-item index="/" class="menu-item">
            <el-icon><HomeFilled /></el-icon>
            <template #title>
              <span>首页概览</span>
            </template>
          </el-menu-item>
          
          <el-menu-item index="/sentiment" class="menu-item">
            <el-icon><DataLine /></el-icon>
            <template #title>
              <span>情感详情分析</span>
            </template>
          </el-menu-item>
          
          <el-menu-item index="/keywords" class="menu-item">
            <el-icon><Monitor /></el-icon>
            <template #title>
              <span>关键词监控</span>
            </template>
          </el-menu-item>
          
          <el-menu-item index="/platform-comparison" class="menu-item">
            <el-icon><DataAnalysis /></el-icon>
            <template #title>
              <span>平台数据对比</span>
            </template>
          </el-menu-item>
          
          <el-menu-item index="/monitor-targets" class="menu-item">
            <el-icon><Aim /></el-icon>
            <template #title>
              <span>监控目标管理</span>
            </template>
          </el-menu-item>
          
          <el-menu-item index="/reports" class="menu-item">
            <el-icon><Document /></el-icon>
            <template #title>
              <span>报表与导出</span>
            </template>
          </el-menu-item>
          
          <el-menu-item index="/settings" class="menu-item">
            <el-icon><Setting /></el-icon>
            <template #title>
              <span>系统配置</span>
            </template>
          </el-menu-item>
        </el-menu>
      </div>
    </el-aside>
    
    <el-container class="main-container">
      <!-- 顶部导航 -->
      <el-header class="header">
        <div class="header-left">
          <el-button 
            type="text" 
            class="toggle-button" 
            @click="toggleSidebar"
          >
            <el-icon :size="20" v-if="isCollapse"><Expand /></el-icon>
            <el-icon :size="20" v-else><Fold /></el-icon>
          </el-button>
          
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">
              <el-icon><HomeFilled /></el-icon> 首页
            </el-breadcrumb-item>
            <el-breadcrumb-item v-if="route.name !== 'home'">
              {{ route.meta.title?.toString().split(' - ')[0] }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        
        <div class="header-right">
          <div class="time-display">
            <div class="time">{{ formattedTime() }}</div>
            <div class="date">{{ formattedDate() }}</div>
          </div>
          
          <el-button 
            type="text" 
            class="mode-toggle"
            @click="toggleDarkMode"
          >
            <el-icon :size="18"><Setting /></el-icon>
          </el-button>
          
          <el-divider direction="vertical" />
          
          <el-dropdown trigger="click">
            <div class="user-dropdown">
              <el-avatar :size="32" class="user-avatar">管</el-avatar>
              <span class="username">管理员</span>
              <el-icon class="el-icon--right"><ArrowDown /></el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-icon><User /></el-icon> 个人中心
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-icon><Setting /></el-icon> 修改密码
                </el-dropdown-item>
                <el-dropdown-item divided>
                  <span style="color: #f56c6c">退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      
      <!-- 主内容区 -->
      <el-main class="main">
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
/* 全局变量 */
:root {
  --primary-color: #1890ff;
  --primary-hover: #40a9ff;
  --success-color: #52c41a;
  --warning-color: #faad14;
  --danger-color: #f5222d;
  --text-color: #333;
  --text-color-secondary: #666;
  --border-color: #eaeaea;
  --bg-color: #f5f7fa;
  --header-bg: #fff;
  --menu-bg: #001529;
  --menu-text: #bfcbd9;
  --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 暗黑模式变量 */
.dark-mode {
  --primary-color: #177ddc;
  --primary-hover: #1890ff;
  --success-color: #49aa19;
  --warning-color: #d89614;
  --danger-color: #d32029;
  --text-color: #e6e6e6;
  --text-color-secondary: #a6a6a6;
  --border-color: #434343;
  --bg-color: #141414;
  --header-bg: #1f1f1f;
  --menu-bg: #0a0a0a;
  --menu-text: #a6a6a6;
  --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
}

/* 全局样式 */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}
</style>

<style scoped>
.app-container {
  height: 100vh;
  min-height: 100vh;
  background-color: var(--bg-color);
  transition: background-color 0.3s;
}

/* 侧边栏样式 */
.aside {
  background-color: var(--menu-bg);
  color: var(--menu-text);
  transition: all 0.3s;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.logo-container {
  height: 60px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(90deg, var(--primary-color), var(--menu-bg));
  transition: all 0.3s;
}

.logo-container.collapsed {
  padding: 0;
  justify-content: center;
}

.logo {
  height: 40px;
  width: 40px;
  flex-shrink: 0;
  margin-right: 10px;
  transition: all 0.3s;
}

.title {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  opacity: 1;
  transition: all 0.3s;
}

.menu-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 10px;
}

.el-menu-vertical {
  border-right: none !important;
  transition: width 0.3s;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 100%;
}

.menu-item {
  margin: 4px 0;
}

/* 顶部导航样式 */
.header {
  background-color: var(--header-bg);
  color: var(--text-color);
  height: 60px;
  line-height: normal;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 999;
  transition: background-color 0.3s, color 0.3s;
}

.header-left {
  display: flex;
  align-items: center;
}

.toggle-button {
  margin-right: 15px;
  font-size: 20px;
  color: var(--text-color-secondary);
  padding: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.time-display {
  text-align: right;
  line-height: 1.2;
}

.time {
  font-size: 20px;
  font-weight: 500;
  color: var(--primary-color);
}

.date {
  font-size: 12px;
  color: var(--text-color-secondary);
}

.mode-toggle {
  color: var(--text-color-secondary);
  transition: color 0.3s;
}

.mode-toggle:hover {
  color: var(--primary-color);
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 8px;
  height: 40px;
  border-radius: 4px;
  transition: background 0.3s;
}

.user-dropdown:hover {
  background: rgba(0, 0, 0, 0.05);
}

.user-avatar {
  background: var(--primary-color);
  color: #fff;
  font-weight: bold;
  margin-right: 8px;
}

.username {
  margin: 0 8px;
  font-size: 14px;
  color: var(--text-color);
}

/* 主容器样式 */
.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 主内容区样式 */
.main {
  background-color: var(--bg-color);
  padding: 20px;
  flex: 1;
  overflow-y: auto;
  transition: background-color 0.3s;
  position: relative;
}
</style>
